import { Button, Flex } from "antd";
import { useEffect, useState } from "react";
import { setLogCb } from "../service/recv";

let logBuf: string[] = [];

export default function Log() {

  const [logs, setLogs] = useState<string[]>([]);

  useEffect(() => {
    setLogCb((log) => {
      logBuf.push(log);
      const p = [...logBuf];
      setLogs( p );
    });
  }, []);

  return (
    <Flex vertical={true} style={{ width: '400px', height: '300px', }} className="card m10">
      <Flex vertical={false} style={{ width: '100%' }} justify={'end'}>
        <Button onClick={()=> {logBuf = []; setLogs([]); } } danger={true} type={"primary"}>清空</Button>
      </Flex>
      <Flex vertical={true} style={{ overflowY: 'scroll' }}>
        {
          logs.map((item, index) => <label key={index}>{item}</label> )
        }
      </Flex>

    </Flex>
  )
}


